<template>
  <div class="content">
    <div id="app" class="fullscr">
      <div>
        <video
          src="../assets/back_run.mp4"
          style="
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            width: auto;
            height: auto;
            z-index: -100;
            -webkit-filter: grayscale(20%);
          "
          autoplay="autoplay"
          loop="loop"
          muted="muted"
        ></video>
      </div>
      <div style="width: 100%; height: 100%; position: absolute; top: 20px; left: 20px">
        <div class="newtitle">北票概况</div>
        <pre
          style="
            color: rgb(255, 255, 255);
            font-family: 黑体;
            margin-top: 0px;
            margin-bottom: 0px;
            position: absolute;
            top: 30px;
            left: 10px;
          "
        >  农产品总产值             一产增加值            
    <span style="color: rgb(164, 184, 11);font-family:fantasy;font-size:30px;">82.10</span>亿元            <span style="color: rgb(164, 184, 11);font-family:fantasy;font-size:30px;">41.30</span>亿元
    </pre>
        <pre
          style="
            color: rgb(255, 255, 255);
            font-family: 黑体;
            margin-top: 0px;
            margin-bottom: 0px;
            position: absolute;
            top: 115px;
            left: 10px;
          "
        >  粮食产量                 蔬菜产量 
    <span style="color: rgb(11, 147, 184);font-family:fantasy;font-size:30px;">12.5</span>亿斤               <span style="color: rgb(11, 147, 184);font-family:fantasy;font-size:30px;">70.19</span>万吨
    </pre>
        <pre
          style="
            color: rgb(255, 255, 255);
            font-family: 黑体;
            margin-top: 0px;
            margin-bottom: 0px;
            position: absolute;
            top: 200px;
            left: 10px;
          "
        >  畜牧出栏量               肉类产量 
    <span style="color: rgb(11, 147, 184);font-family:fantasy;font-size:30px;">7,851</span>万只             <span style="color: rgb(11, 147, 184);font-family:fantasy;font-size:30px;">29.05</span>万吨
    </pre>
        <div class="newtitle" style="position: absolute; left: 0px; top: 275px">
          产业简介
        </div>
        <div style="position: absolute; left: 0px; top: 255px">
          <Scrollbar></Scrollbar>
        </div>
        <div class="newtitle" style="position: absolute; left: 0px; top: 630px">
          产业特色
          <div
            class="-datav-wraper"
            style="
              width: 400px;
              height: 250px;
              pointer-events: auto;
              position: absolute;
              left: 0px;
              top: 30px;
            "
          >
            <video
              autoplay
              controls=""
              loop=""
              width="400"
              height="250"
              class="video-switch"
              style="object-fit: fill"
            >
              <source
                src="https://fmpic.oss-cn-beijing.aliyuncs.com/test/%E5%8C%97%E7%A5%A8/%E5%B7%9D%E5%B7%9E%E5%A4%A7%E5%9C%B0%E4%B8%8A%E7%9A%84%E7%BB%BF%E8%89%B2%E7%95%85%E6%83%B31025.mp4"
              />
            </video>
          </div>
        </div>
      </div>
      <div
        style="position: absolute; left: 550px; top: 20px; width: 800px; height: 890px"
      >
        <img src="../assets/beipiao/完整地图.png" style="width: 100%; height: 100%" />
        <div style="position: absolute; left: 150px; top: 200px">
          <!-- 鸡 -->
          <img
            src="../assets/beipiao/鸡.png"
            style="width: 30px; height: 30px; position: absolute; top: 560px; left: 200px"
          />
          <img
            src="../assets/beipiao/鸡.png"
            style="width: 30px; height: 30px; position: absolute; top: 340px; left: 80px"
          />
          <img
            src="../assets/beipiao/鸡.png"
            style="width: 30px; height: 30px; position: absolute; top: 320px; left: 180px"
          />
          <img
            src="../assets/beipiao/鸡.png"
            style="width: 30px; height: 30px; position: absolute; top: 80px; left: 150px"
          />
          <img
            src="../assets/beipiao/鸡.png"
            style="width: 30px; height: 30px; position: absolute; top: 20px; left: 300px"
          />
          <img
            src="../assets/beipiao/鸡.png"
            style="width: 30px; height: 30px; position: absolute; top: 60px; left: 250px"
          />
          <img
            src="../assets/beipiao/鸡.png"
            style="width: 30px; height: 30px; position: absolute; top: 150px; left: 280px"
          />
          <img
            src="../assets/beipiao/鸡.png"
            style="width: 30px; height: 30px; position: absolute; top: 280px; left: 420px"
          />
        </div>
        <div style="position: absolute; left: 50px; top: 100px">
          <!-- 猪 -->
          <img
            src="../assets/beipiao/猪.png"
            style="width: 30px; height: 30px; position: absolute; top: 220px; left: 40px"
          />
          <img
            src="../assets/beipiao/猪.png"
            style="width: 30px; height: 30px; position: absolute; top: 360px; left: 110px"
          />
          <img
            src="../assets/beipiao/猪.png"
            style="width: 30px; height: 30px; position: absolute; top: 260px; left: 140px"
          />
          <img
            src="../assets/beipiao/猪.png"
            style="width: 30px; height: 30px; position: absolute; top: 340px; left: 200px"
          />
          <img
            src="../assets/beipiao/猪.png"
            style="width: 30px; height: 30px; position: absolute; top: 70px; left: 300px"
          />
          <img
            src="../assets/beipiao/猪.png"
            style="width: 30px; height: 30px; position: absolute; top: 190px; left: 260px"
          />
        </div>
        <div style="position: absolute; left: 50px; top: 100px">
          <img
            src="../assets/beipiao/西红柿.png"
            style="width: 30px; height: 30px; position: absolute; top: 320px; left: 130px"
          />
          <img
            src="../assets/beipiao/西红柿.png"
            style="width: 30px; height: 30px; position: absolute; top: 150px; left: 130px"
          />
          <img
            src="../assets/beipiao/西红柿.png"
            style="width: 30px; height: 30px; position: absolute; top: 110px; left: 170px"
          />
          <img
            src="../assets/beipiao/西红柿.png"
            style="width: 30px; height: 30px; position: absolute; top: 180px; left: 200px"
          />
          <img
            src="../assets/beipiao/西红柿.png"
            style="width: 30px; height: 30px; position: absolute; top: 200px; left: 180px"
          />
          <img
            src="../assets/beipiao/西红柿.png"
            style="width: 30px; height: 30px; position: absolute; top: 340px; left: 200px"
          />
          <img
            src="../assets/beipiao/西红柿.png"
            style="width: 30px; height: 30px; position: absolute; top: 440px; left: 300px"
          />
          <img
            src="../assets/beipiao/西红柿.png"
            style="width: 30px; height: 30px; position: absolute; top: 240px; left: 350px"
          />
          <img
            src="../assets/beipiao/西红柿.png"
            style="width: 30px; height: 30px; position: absolute; top: 370px; left: 370px"
          />
          <img
            src="../assets/beipiao/西红柿.png"
            style="width: 30px; height: 30px; position: absolute; top: 390px; left: 390px"
          />
        </div>
        <div style="position: absolute; left: 50px; top: 100px">
          <img
            src="../assets/beipiao/果子.png"
            style="width: 30px; height: 30px; position: absolute; top: 470px; left: 230px"
          />
          <img
            src="../assets/beipiao/果子.png"
            style="width: 30px; height: 30px; position: absolute; top: 450px; left: 260px"
          />
          <img
            src="../assets/beipiao/果子.png"
            style="width: 30px; height: 30px; position: absolute; top: 370px; left: 240px"
          />
          <img
            src="../assets/beipiao/果子.png"
            style="width: 30px; height: 30px; position: absolute; top: 340px; left: 250px"
          />
          <img
            src="../assets/beipiao/果子.png"
            style="width: 30px; height: 30px; position: absolute; top: 350px; left: 280px"
          />
          <img
            src="../assets/beipiao/果子.png"
            style="width: 30px; height: 30px; position: absolute; top: 370px; left: 400px"
          />
        </div>
      </div>
      <div class="newtitle" style="position: absolute; left: 1450px; top: 20px">
        园区经营主体经营情况
        <pmlbb></pmlbb>
      </div>
      <div class="newtitle" style="position: absolute; left: 1450px; top: 660px">
        北票农产品年存量
        <calegy></calegy>
      </div>
    </div>
  </div>
</template>

<script>
import DevicePixelRatio from "@/libs/rem.js";
import Scrollbar from "@/components/beipiao/scollbar.vue";
import yuanqu from "@/components/beipiao/yuanqujingying.vue";
import pmlbb from "@/components/beipiao/pmlbb.vue";
import calegy from "@/components/beipiao/calegy.vue";
export default {
  components: {
    calegy,
    Scrollbar,
    yuanqu,
    pmlbb,
  },
  // created() {
  //   new DevicePixelRatio().init();
  // },
};
</script>

<style scoped lang="scss">
.content {
  width: 100%;
  height: 100%;
}
.newtitle {
  border: 2px solid;
  border-image: linear-gradient(to right, rgba(0, 225, 255, 1), rgba(255, 255, 255, 0.5));
  border-image-slice: 1;
  border-left-width: 6px;
  border-right-width: 0px;
  border-top-width: 0px;
  color: aliceblue;
  width: 400px;
  height: 23px;
  box-shadow: 0px 0px 10px rgb(0, 153, 184), 0px 0px 30px rgb(0, 247, 255);
  box-shadow: 0px 0px 50px rgb(0, 153, 184) inset, 0px 0px 30px rgb(0, 218, 247);
}
</style>
